<template>
  <div class="safety-management">
    <!-- 页眉 -->
    <el-row class="page-header">
      <el-col :span="24" class="header-container">
        <div class="page-title">组织机构 - 安全生产</div>
        <div class="user-actions">
          <el-button type="success" icon="plus" @click="openAddDialog">添加管理文件</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 管理文件表格 -->
    <el-table :data="files" border style="width: 100%">
      <el-table-column prop="fileType" label="文件类型" align="center" />
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="number" label="编号" align="center" />
      <el-table-column prop="file" label="文件" align="center" />
      <el-table-column label="操作" align="center" width="150">
        <template #default="{ row }">
          <el-button type="text" size="small" icon="view" @click="viewFile(row)">查看</el-button>
          <el-button type="text" size="small" icon="delete" @click="deleteFile(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加文件弹窗 -->
    <el-dialog v-model="addDialogVisible" title="添加管理文件" width="50%">
      <el-form ref="addFormRef" :model="form" label-width="100px">
        <el-form-item label="类型">
          <el-checkbox-group v-model="form.fileType">
            <el-checkbox label="SMP" />
            <el-checkbox label="SOP" />
            <el-checkbox label="SOR" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name" placeholder="请输入文件名称" />
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="form.number" placeholder="请输入编号" />
        </el-form-item>
        <el-form-item label="文件">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleFileUpload"
          >
            <el-button type="primary" icon="upload">上传文件</el-button>
          </el-upload>
          <span v-if="form.file">{{ form.file }}</span>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-success="handleImageUpload"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import axios from "axios";

// 数据
const files = ref([
  {
    fileType: "SMP",
    name: "安全生产管理制度",
    number: "SMP-GACP-AQSC 001 v1.0",
    file: "SMP-GACP-AQSC.pdf",
  },
  {
    fileType: "SMP",
    name: "生产管理规程",
    number: "SMP-GACP-SCGL 002 v1.0",
    file: "SMP-GACP-SCGL.pdf",
  },
]);

// 表单数据
const form = reactive({
  fileType: [],
  name: "",
  number: "",
  file: "",
  image: [],
});

// 弹窗控制
const addDialogVisible = ref(false);

// 打开添加文件弹窗
const openAddDialog = () => {
  Object.keys(form).forEach((key) => (form[key] = Array.isArray(form[key]) ? [] : ""));
  addDialogVisible.value = true;
};

// 提交表单数据的方法
const handleSubmit = async () => {
  if (form.fileType.length && form.name && form.number && form.file) {
    try {
      // 这里假设将数据发送到 /api/save 接口
      const response = await axios.post("/api/save", form);
      console.log("数据保存成功:", response.data);
      // 清空表单
      openAddDialog();
      // 更新文件列表
      files.value.push({ ...form });
    } catch (error) {
      console.error("保存数据时出错:", error);
    }
    // 关闭弹窗
    addDialogVisible.value = false;
  } else {
    console.error("请填写完整的表单信息");
  }
};

// 处理文件上传成功
const handleFileUpload = (response: any, file: any) => {
  form.file = file.name;
};

// 处理图片上传成功
const handleImageUpload = (response: any, file: any) => {
  form.image.push(file.name);
};

// 查看文件
const viewFile = (row: any) => {
  console.log("查看文件:", row);
};

// 删除文件
const deleteFile = (row: any) => {
  const index = files.value.indexOf(row);
  if (index !== -1) {
    files.value.splice(index, 1);
  }
};
</script>
<style scoped>
.safety-management {
  padding: 20px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-title {
  font-size: 20px;
  font-weight: bold;
  color: #4caf50;
}
.el-upload {
  display: block;
}
</style>
